<template>
	<!-- 安全决策 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="outerCollapse">
			<u-collapse-item name="1" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">机电设备故障告警统计</text></view>
				</template>
				<u-tabs lineColor="#2172FC" :list="[{name: '告警'},{name: '故障'}]"
					:activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">运输设备告警统计</text></view>
				</template>
				<u-tabs lineColor="#2172FC" :list="[{name: '告警'},{name: '故障'}]"
					:activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<view class="p-10  m-b-10 m-t-10" style="background-color: #F5F7FE;">
					近30天告警次数
					<span class="fw">
						36
					</span> 次
				</view>
				<view class="flex m-b-10 p-10" v-for="(item, index) in list" :key="index" style="font-size: 16px;"
					:class="{ 'even-background': (index+1) % 2 === 0 }">
					<view class="fw">
						{{index+1}}
					</view>
					<view class="m-l-20">
						{{item.title}}
					</view>
					<view class="m-r-20" style=" margin-left: auto;">
						{{item.value}}
					</view>
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">风险灾害预警统计</text></view>
				</template>
				<view class="list-title">近30天预警次数累计
					<view class="list-conten">88次</view>
				</view>
				<view class="charts-box m-t-10">
					<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">安防视频告警统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData3" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="5" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">巡视机器人告警统计</text></view>
				</template>
				<view class="list-title">近30天预警次数累计
					<view class="list-conten">88次</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="radar" :opts="opts4" :chartData="chartData4" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5])

	const list = ref([{
		title: '超速行驶',
		value: '80次',
	}, {
		title: '超速行驶',
		value: '80次',
	}, {
		title: '超速行驶',
		value: '80次',
	}, ])

	const chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		chartData4 = ref({}),
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: false,
			},
			title: {
				name: "36次",
				fontSize: 15,
				color: "#000",
				offsetY: -10
			},
			subtitle: {
				name: "近30天告警累计",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		opts2 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				data: [{
					min: 0,
					axisLine: false,
				}]
			},
			extra: {
				column: {
					type: "group",
					width: 20,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "opacity",
					linearOpacity: 0.1,
				}
			}
		},
		opts3 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: false,
			},
			title: {
				name: "36次",
				fontSize: 15,
				color: "#000",
				offsetY: -10
			},
			subtitle: {
				name: "近30天告警累计",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		opts4 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false,
			},
			extra: {
				radar: {
					gridType: "radar",
					gridColor: "#CCCCCC",
					gridCount: 3,
					opacity: 0.2,
					labelShow: true,
					border: true
				}
			}
		}

	const getServerData = () => {
		setTimeout(() => {
			let res1 = {
				series: [{
					data: [{
						name: "皮带运输机",
						value: 100
					}, {
						name: "破碎站",
						value: 150
					}, {
						name: "破碎机",
						value: 151
					}, {
						name: "转载车",
						value: 104,
					}, {
						name: "其他",
						value: 104,
					}]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));

			let res2 = {
				categories: ["瓦斯", "边坡", "水文", "粉尘", "火灾"],
				series: [{
					name: "",
					data: [80, 140, 230, 170, 110]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));

			let res3 = {
				series: [{
					data: [{
						name: "未佩戴安全帽",
						value: 100
					}, {
						name: "行为异常",
						value: 150
					}, {
						name: "抽烟",
						value: 151
					}, {
						name: "烟雾",
						value: 104,
					}]
				}]
			};
			chartData3.value = JSON.parse(JSON.stringify(res3));

			let res4 = {
				categories: ["AI识别", "烟雾", "CO", "甲烷", "粉尘", "噪音", "湿度", "温度"],
				series: [{
					name: "",
					data: [180, 110, 165, 195, 187, 172, 210, 166]
				}]
			};
			chartData4.value = JSON.parse(JSON.stringify(res4));

		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
	.even-background {
		background-color: #F1F6FC;
	}
</style>